<script lang="ts" setup>
import PayInfoCreateVue from "./CreatePayInfo.vue";
import PayInfoUpdateVue from "@/views/PayInfo/Components/UpdatePayInfo.vue";

import { ref, reactive, computed, watch, onBeforeMount } from "vue";
import { Action } from "element-plus";
import { filterPayStatus } from "@/utils/filters";
import { PayInfoApi, MerchantApi } from "@/Api";

interface Props {
   data: Client.Table;
}

const props = withDefaults(defineProps<Props>(), {});

const data = computed(() => props.data);
const payInfo = ref<PayInfo.InlineTable[]>();
const activePayInfo = ref<PayInfo.InlineTable>();
const showCreatePayInfo = ref(false);
const showUpdatePayInfo = ref(false);
const loading = reactive({
   table: false
});
const merchantList = ref<Merchant.SearchResult[]>();

/** 格式化金额 */
function filterExpenses(num?: number | string | null) {
   if (!num) return;
   let fee: number;
   if (typeof num == "string") num = Number(num);
   fee = num;

   return fee / 100 + " 元";
}

/** 获取支付信息 */
async function getPayInfo(client: Client.Table) {
   if (!client) return;
   loading.table = true;

   try {
      const { code, data } = await PayInfoApi.SearchOne({ client_id: client.id });
      if (code == 200) payInfo.value = data;
   } catch (error) {
      console.log("error", error);
   }

   loading.table = false;
}

/** 获取商户列表 */
async function getMerchant() {
   try {
      const { code, data } = await MerchantApi.Search({ status: "OPEN" });
      if (code === 200) merchantList.value = data;
   } catch (error) {
      console.log("error", error);
   }
}

function handlerClick(data: Client.Table) {
   showCreatePayInfo.value = true;
}

/** 修改缴费信息 */
function handlerUpdate(info: PayInfo.InlineTable) {
   if (!info) return;
   activePayInfo.value = info;
   showUpdatePayInfo.value = true;
}

/** 取消缴费信息 */
function handlerClose(info: PayInfo.InlineTable) {
   try {
      ElMessageBox.confirm("取消当前缴费信息?", "警告", {
         confirmButtonText: "确定",
         cancelButtonText: "关闭",
         type: "warning",
         callback: async (action: Action) => {
            if (action === "confirm") {
               const { code } = await PayInfoApi.Delete({ pay_id: info.pay_id });
               if (code === 200) {
                  ElMessage.success("取消成功");
                  getPayInfo(data.value);
               }
            }
         }
      });
   } catch (error) {
      console.log("error", error);
   }
}

watch(showCreatePayInfo, value => {
   if (!value) getPayInfo(data.value);
});
watch(showUpdatePayInfo, value => {
   if (!value) getPayInfo(data.value);
});

onBeforeMount(() => {
   getPayInfo(data.value);
   getMerchant();
});
</script>

<template>
   <el-table
      class="inline_table"
      v-loading="loading.table"
      :data="payInfo"
      border
      stripe
      size="small"
      empty-text="暂无数据"
      :tooltip-options="{
         enterable: true,
         placement: 'top',
         showArrow: true,
         hideAfter: 200,
         popperOptions: { strategy: 'fixed' }
      }"
      max-height="200">
      <el-table-column prop="name" label="学生姓名" width="85" show-overflow-tooltip />
      <el-table-column prop="fee" label="金额" width="130" align="right">
         <template #default="{ row }: { row: PayInfo.InlineTable }"> {{ Number(row.fee) / 100 }} 元 </template>
      </el-table-column>
      <el-table-column prop="actual_expenses" label="实际支付金额" width="130" align="right">
         <template #default="{ row }: { row: PayInfo.InlineTable }">
            {{ filterExpenses(row.actual_expenses) }}
         </template>
      </el-table-column>
      <el-table-column prop="Merchant" label="付款商户" width="100">
         <template #default="{ row }: { row: PayInfo.InlineTable }">
            {{ merchantList?.find(item => item.id == row.merchant)?.name || "" }}
         </template>
      </el-table-column>
      <el-table-column prop="level" label="层次" width="100" />
      <el-table-column prop="school" label="学校" min-width="150" show-overflow-tooltip />
      <el-table-column prop="category" label="类别" min-width="75" />
      <el-table-column prop="major" label="专业" />
      <el-table-column prop="batch" label="批次" />
      <el-table-column prop="school_year" label="学年" />
      <el-table-column prop="status" label="状态">
         <template #default="{ row }: { row: PayInfo.InlineTable }">
            {{ filterPayStatus[row.status] }}
         </template>
      </el-table-column>
      <el-table-column prop="description" label="备注" min-width="150" show-overflow-tooltip />
      <el-table-column width="120" align="right">
         <template #header>
            <el-link type="primary" @click="handlerClick(data)">
               <el-icon><Plus /></el-icon>
               添加缴费
            </el-link>
         </template>
         <template #default="{ row }: { row: PayInfo.InlineTable }">
            <el-link type="primary" :disabled="row.status !== 'OPEN'" @click="handlerUpdate(row)">
               <el-icon><Edit /></el-icon> 编辑
            </el-link>
            <el-link type="danger" :disabled="row.status !== 'OPEN'" @click="handlerClose(row)">
               <el-icon><CloseBold /></el-icon> 取消
            </el-link>
         </template>
      </el-table-column>
   </el-table>

   <PayInfoCreateVue v-model="showCreatePayInfo" :client-id="data.id" :merchant-list="merchantList" />
   <PayInfoUpdateVue v-model="showUpdatePayInfo" :pay-info="activePayInfo" :merchant-list="merchantList" />
</template>

<style lang="scss" scoped>
.inline_table {
   width: 100%;
   position: relative;
}

.el-link {
   margin-left: 5px;
}
</style>
